<template>
  <div class="menulist">
    <div class="rateContent">
      <div class="sibarLeft">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          node-key="fid"
          :default-expanded-keys="fidKeys"
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="table-content">
        <jc-table
          sortable
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          serial
        >
          <template v-slot:btnState="col">
            <el-tag
              v-for="item in col.scope.row.detail"
              :key="item.fid"
              closable
              @close="closeTag(item.fid)"
            >
              {{ item.fname }}
            </el-tag>
          </template>
          <template v-slot:btnStates="col">
            <el-button v-if="!col.scope.row.fattstatus" size="mini" type="primary" @click="updateStatu(col.scope.row, 1)">启用</el-button>
            <el-button v-else size="mini" type="danger" @click="updateStatu(col.scope.row, 2)">{{ $t('btn.disab') }}<!--禁用--></el-button>
          </template>
          <!-- 操作 -->
          <template v-slot:btnSlot="col">
            <el-button type="primary" size="mini" @click="newlyCode(col.scope.row)">
              {{ $t('market.addProperty') }}<!--新增属性-->
            </el-button>
          </template>
        </jc-table>
      </div>
      <!--  新增修改属性弹窗  -->
      <el-dialog
        :title="$t('market.addProperty')"
        model
        :visible.sync="openWarehouse"
        :close-on-click-modal="false"
        width="600px"
      >
        <div style="display: flex;margin-bottom: 5px">
          <el-input v-model="fname" size="mini" style="width: 168px;margin-right: 10px;" />
          <el-button size="mini" type="primary" @click="queryAttribute">{{ $t('btn.search') }}</el-button>
        </div>
        <div>
          <jc-table :table-header="attrHeader" :table-data="attrData" table-height="400px">
            <template v-slot:tagSlot="col">
              <el-tag v-if="col.scope.row.fstatus === 0">{{ $t('market.normal') }}</el-tag>
              <el-tag v-else-if="col.scope.row.fstatus === 1" type="danger">{{ $t('btn.disab') }}<!--禁用--></el-tag>
            </template>
            <template v-slot:btnSlot="col">
              <el-button
                :disabled="col.scope.row.fstatus===1"
                type="primary"
                size="mini"
                @click="onSubmit(col.scope.row.attributeType)"
              >{{ $t('btn.add') }}</el-button>
            </template>
          </jc-table>
        </div>
        <jc-pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="size"
          @pagination="queryAttribute"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  queryContrast, insertMaterialattribute,
  queryMaterialattribute, deleteaterialattribute, queryAttributeList, updateMaterialNumber1
} from '@/api/encodingRules/codeComparative'
export default {
  name: 'Properties',
  data() {
    return {
      fbillNo: 'fgroupName',
      treeData: [
        {
          fname: '全部',
          fid: 0,
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'fname'
      },
      fidKeys: [0],
      openWarehouse: false, // 弹窗
      tableData: [],
      tableHeader: [
        { label: this.$t('shop.name1'), prop: 'fname', width: '100' },
        { label: this.$t('market.property'), type: 'state', tooltip: true },
        { label: this.$t('market.isUsed'), type: 'states', width: '120' },
        { label: this.$t('market.handle'), type: 'btn', width: '100' }
      ],
      pageNum: 1,
      size: 200,
      fname: '',
      total: 0,
      attrData: [],
      attrHeader: [
        { label: this.$t('market.property'), prop: 'attributeName' },
        { label: this.$t('shop.state'), type: 'tag', prop: 'fstatus' },
        { label: this.$t('market.handle'), type: 'btn', width: '100' }
      ],
      fnum: 0,
      indexSelf: 0,
      tableHeight: '83vh'
    }
  },
  created() {
    this.handleGroup() // 物料分组
  },
  methods: {
    // 打开物料分组
    async handleGroup() {
      const { data: res } = await queryContrast({})
      this.treeData[0].children = res
      this.treeData[0].children.map((item, index) => {
        item.index = index
      })
      this.tableData = res[this.indexSelf].children
    },
    // 点击分组
    handleNodeClick(data) {
      // 新增属性使用数据
      this.fparentid = data.fid
      this.rightData()
    },
    // 获取右侧数据
    rightData() {
      queryMaterialattribute({ fid: this.fparentid }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    // 新增属性
    newlyCode(ev) {
      this.openWarehouse = true
      this.fnumberid = ev.fnumberid
      this.attrData?.length === 0 && this.queryAttribute()
    },
    // 新增属性的列表
    queryAttribute() {
      queryAttributeList({
        pageSize: this.size,
        pageNum: this.pageNum,
        fname: this.fname
      }).then(res => {
        if (res.code === 0) {
          this.attrData = res.data.array
          this.total = res.data.total
        }
      })
    },
    // 新增
    onSubmit(ev) {
      insertMaterialattribute({
        fnumberid: this.fnumberid,
        fattributeid: ev
      }).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
          // this.openWarehouse = false
          this.rightData()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除物料属性
    closeTag(fid) {
      deleteaterialattribute({ fid }).then(res => {
        if (res.code === 0) {
          this.rightData()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 启用禁用
    updateStatu(ev, en) {
      const DATA = {
        fattstatus: en === 1,
        fid: ev.fnumberid
      }
      updateMaterialNumber1(DATA).then(res => {
        if (res.code === 0) {
          this.rightData()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.menulist {
  @include listBom;
  .rateContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 5px;
    .sibarLeft {
      width: 18%;
      min-width: 170px;
      max-height: calc(100vh - 130px);
      overflow: auto;
      border-right: 1px solid #eee;
    }
    .table-content {
      width: 82%;
      margin: 0 10px;
    }
  }
  .el-form {
    .el-form-item{
      margin-bottom: 0;
    }
  }
  .el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 3px;
  }
}
</style>
